<template>
  <div class="container">
    <div style="margin-top: 15px">
      <!-- 分类查询 -->
      <el-form>
        <el-form-item>
          <el-select v-model="alllist" style="width: 120px">
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :value="item.type"
              :label="item.title"
            ></el-option>
          </el-select>
          <!-- 搜索框 -->
          <el-input
            v-model="inputValue"
            placeholder="请输入内容"
            class="this-input"
            style="margin-left: 5px; width: 200px"
          ></el-input>
          <!-- 搜索按钮 -->
          <el-button
            @click="upClick"
            type="primary"
            icon="el-icon-search"
            style="margin-left: 15px"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div>
      <template>
        <el-table
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          border
          style="width: 100%"
        >
          <el-table-column
            fixed
            prop="name"
            label="门店名"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="phone" label="电话" width="120" align="center">
          </el-table-column>
          <el-table-column
            prop="time"
            label="营业时间"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="score" label="评分" width="120" align="center">
          </el-table-column>
          <el-table-column
            prop="describe"
            label="门店描述"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="isFlag"
            label="门店状态"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag effect="dark" v-if="scope.row.isFlag == 0" class="shenqin"
                >申请中</el-tag
              >
              <el-tag
                effect="dark"
                type="success"
                v-if="scope.row.isFlag == 1"
                class="tongguo"
                >已通过</el-tag
              >
              <el-tag effect="dark" type="danger" v-if="scope.row.isFlag == 2"
                >未通过</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="primary"
                icon="el-icon-edit"
                circle
                >处理</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import service from "../../utils/request";
export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页条数
      total: 0, // 总条数
      tableData: [],
      inputValue: "",
      alllist: "all",
      typeList: [
        { type: "all", title: "所有" },
        { type: "address", title: "地址" },
        { type: "name", title: "门店名" },
        { type: "phone", title: "电话" },
      ],
      id: "",
      form: {
        account: "",
        name: "",
        age: "",
        gender: "",
        phone: "",
        position: "",
        status: "",
      },
      dialogFormVisible: false,
      formLabelWidth: "120px",
    };
  },

  methods: {
    handleClick(data) {
      this.$router.push({ name: "information", query: { data: data } });
    },
    // 分页功能
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },

    // 查询功能
    upClick() {
      if (this.alllist == "all") {
        service.get(`/shopDoors`).then((res) => {
          console.log(res, "data3435345");
          this.tableData = res.rows;
        });
      } else {
        service
          .get(`/shopDoors?value=${this.inputValue}&type=${this.alllist}`)
          .then((res) => {
            this.tableData = res.rows;
            this.total = res.total;
            this.inputValue = "";
          });
      }
    },
  },
  // 数据渲染
  mounted() {
    service.get(`/shopDoors`).then((res) => {
      this.tableData = res.rows;
    });
  },
};
</script>

<style scoped>
.container {
  padding: 0 20px;
}
.shenqin {
  background-color: darkgray !important;
  border-color: darkgray !important;
}
.el-table {
  margin: auto;
}
/* 分页 */
.container .el-pagination {
  margin: 20px auto;
}
</style>